import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { getRequestDetail } from "@/lib/queries/admin";
import { formatBytes, formatDate, formatMs, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Stat, StatGrid } from "@/components/ui/stat";
import { CodeBlock } from "@/components/ui/code-block";
import { CopyButton } from "@/components/ui/copy-button";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { KV, MarginText, Mono, NetworkBadge, Panel, PlanBadge, ProviderBadge, numCell } from "@/components/admin/primitives";

export const dynamic = "force-dynamic";

export default async function AdminRequestDetail({ params }: { params: Promise<{ id: string }> }) {
  await requireAdmin();
  const { id } = await params;
  const d = await getRequestDetail(id);
  if (!d) notFound();
  const { req } = d;
  const margin = req.priceUsd - req.costUsd;

  return (
    <>
      <div className="mb-4">
        <Button asChild variant="ghost" size="sm" className="-ml-2">
          <Link href="/admin/requests">
            <ArrowLeft className="size-3.5" /> Requests
          </Link>
        </Button>
      </div>
      <PageHeader
        eyebrow="Request"
        title={
          <span className="flex flex-wrap items-center gap-2">
            <Mono className="text-[18px]">{req.id}</Mono>
            <CopyButton value={req.id} size="icon-sm" className="size-6" />
            <StatusBadge status={req.status} />
            {req.errorCode ? <Badge variant="danger">{req.errorCode}</Badge> : null}
            {req.cached ? <Badge variant="info">cached</Badge> : null}
          </span>
        }
        description={
          <span className="break-all">
            {req.method} {req.url}
          </span>
        }
        actions={
          <>
            {d.org ? (
              <Button asChild variant="outline" size="sm">
                <Link href={`/admin/organizations/${d.org.id}`}>Organization</Link>
              </Button>
            ) : null}
            <Button asChild variant="outline" size="sm">
              <Link href={`/admin/domains/${encodeURIComponent(req.domain)}`}>Domain profile</Link>
            </Button>
          </>
        }
      />

      <StatGrid cols={6} className="mb-6">
        <Stat label="HTTP status" value={req.httpStatus ?? "—"} />
        <Stat label="Attempts" value={req.attempts} />
        <Stat label="Latency" value={formatMs(req.latencyMs)} />
        <Stat label="Bytes in / out" value={`${formatBytes(req.bytesIn)} / ${formatBytes(req.bytesOut)}`} />
        <Stat label="Upstream cost → price" value={`${formatUsd(req.costUsd, true)} → ${formatUsd(req.priceUsd, true)}`} />
        <Stat label="Margin" value={<MarginText value={margin} pct={req.priceUsd > 0 ? (margin / req.priceUsd) * 100 : null} />} />
      </StatGrid>

      <div className="grid gap-6 lg:grid-cols-2">
        <Panel title="Request">
          <KV
            cols={2}
            items={[
              { label: "Organization", value: d.org ? <span className="inline-flex items-center gap-2"><Link href={`/admin/organizations/${d.org.id}`} className="hover:underline">{d.org.name}</Link><PlanBadge plan={d.org.plan} />{d.org.providerVisibility ? <Badge variant="warning">provider debug on</Badge> : null}</span> : req.organizationId },
              { label: "Project", value: d.project ? `${d.project.name} (${d.project.environment})` : req.projectId },
              { label: "API key", value: d.key ? <span>{d.key.name} <Mono className="text-fg-muted">{d.key.keyPrefix}…{d.key.last4}</Mono> <StatusBadge status={d.key.mode} /></span> : req.source === "playground" ? "— (playground)" : "—" },
              { label: "Source", value: req.source },
              { label: "URL", value: <span className="break-all">{req.url}</span>, mono: true, span: true },
              { label: "Final URL", value: req.finalUrl ? <span className="break-all">{req.finalUrl}</span> : "—", mono: true, span: true },
              { label: "Domain", value: req.domain, mono: true },
              { label: "Method", value: req.method, mono: true },
              { label: "Requested network", value: req.requestedNetwork },
              { label: "Resolved network", value: <NetworkBadge network={req.network} /> },
              { label: "Geo", value: [req.country, req.region, req.city].filter(Boolean).join(" / ") || "—", mono: true },
              { label: "Session", value: req.sessionId ?? "—", mono: true },
              { label: "Browser", value: req.browser ? "requested" : "no" },
              { label: "Format", value: req.format },
              { label: "Client IP", value: req.clientIp ?? "—", mono: true },
              { label: "User agent", value: req.userAgent ?? "—", span: true },
              { label: "Created", value: formatDate(req.createdAt) },
              { label: "Completed", value: req.completedAt ? formatDate(req.completedAt) : "—" },
              { label: "Error message", value: req.errorMessage ?? "—", span: true },
            ]}
          />
        </Panel>
        <div className="grid gap-6">
          <Panel title="Timing" description="Milliseconds, as recorded by the gateway.">
            {req.timing && Object.keys(req.timing).length ? (
              <KV cols={3} items={Object.entries(req.timing).map(([k, v]) => ({ label: k, value: formatMs(v), mono: true }))} />
            ) : (
              <p className="text-[13px] text-fg-muted">No timing recorded.</p>
            )}
          </Panel>
          {d.session ? (
            <Panel title="Proxy session" description="Upstream sticky session used by this request.">
              <KV
                cols={2}
                items={[
                  { label: "Session", value: d.session.id, mono: true },
                  { label: "Provider", value: <ProviderBadge id={d.session.provider} /> },
                  { label: "Network", value: <NetworkBadge network={d.session.network} /> },
                  { label: "Status", value: <StatusBadge status={d.session.status} /> },
                  { label: "Requests", value: d.session.requestCount },
                  { label: "Expires", value: formatDate(d.session.expiresAt) },
                ]}
              />
            </Panel>
          ) : null}
          <Panel title="Usage events" flush>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Metric</TableHead>
                  <TableHead className="text-right">Quantity</TableHead>
                  <TableHead className="text-right">Price</TableHead>
                  <TableHead className="text-right">Upstream</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {d.usage.length === 0 ? (
                  <TableEmpty colSpan={4}>No usage events (free-tier or failed before metering).</TableEmpty>
                ) : (
                  d.usage.map((u) => (
                    <TableRow key={u.id}>
                      <TableCell>
                        <Mono>{u.metric}</Mono>
                      </TableCell>
                      <TableCell className={numCell}>
                        {u.unit === "bytes" ? formatBytes(u.quantity) : `${u.quantity} ${u.unit}`}
                      </TableCell>
                      <TableCell className={numCell}>{formatUsd(u.costUsd, true)}</TableCell>
                      <TableCell className={numCell}>{formatUsd(u.upstreamCostUsd, true)}</TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </Panel>
        </div>
      </div>

      <Panel title="Attempts" description="Every upstream attempt with provider, routing score and internal error detail. Never shown to customers." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>#</TableHead>
              <TableHead>Provider</TableHead>
              <TableHead>Network</TableHead>
              <TableHead>Geo</TableHead>
              <TableHead>Outcome</TableHead>
              <TableHead className="text-right">HTTP</TableHead>
              <TableHead>Error / block reason</TableHead>
              <TableHead className="text-right">Score</TableHead>
              <TableHead className="text-right">Duration</TableHead>
              <TableHead className="text-right">Bytes</TableHead>
              <TableHead className="text-right">$/GB</TableHead>
              <TableHead className="text-right">Cost</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {d.attempts.length === 0 ? (
              <TableEmpty colSpan={12}>No attempts recorded (request rejected before routing).</TableEmpty>
            ) : (
              d.attempts.map((a) => (
                <TableRow key={a.id}>
                  <TableCell className={numCell}>{a.attemptNo}</TableCell>
                  <TableCell>
                    <ProviderBadge id={a.provider} />
                  </TableCell>
                  <TableCell>
                    <NetworkBadge network={a.network} />
                  </TableCell>
                  <TableCell>
                    <Mono>{a.country ?? "—"}</Mono>
                    {a.sessionKey ? <div className="font-mono text-[11px] text-fg-subtle">sticky</div> : null}
                  </TableCell>
                  <TableCell>
                    <StatusBadge status={a.outcome} />
                  </TableCell>
                  <TableCell className={numCell}>{a.httpStatus ?? "—"}</TableCell>
                  <TableCell className="max-w-[320px]">
                    {a.errorCode ? <div className="font-mono text-[12px] text-danger">{a.errorCode}</div> : null}
                    {a.blockReason ? <div className="text-[12px] text-fg-muted">block: {a.blockReason}</div> : null}
                    {a.errorDetail ? (
                      <div className="truncate font-mono text-[11.5px] text-fg-subtle" title={a.errorDetail}>
                        {a.errorDetail}
                      </div>
                    ) : null}
                    {!a.errorCode && !a.blockReason && !a.errorDetail ? <span className="text-fg-subtle">—</span> : null}
                  </TableCell>
                  <TableCell className={numCell}>{a.routingScore !== null ? a.routingScore.toFixed(3) : "—"}</TableCell>
                  <TableCell className={numCell}>{formatMs(a.durationMs)}</TableCell>
                  <TableCell className={numCell}>{formatBytes(a.bytesIn + a.bytesOut)}</TableCell>
                  <TableCell className={numCell}>{a.unitPricePerGb ? `$${a.unitPricePerGb}` : "—"}</TableCell>
                  <TableCell className={numCell}>{formatUsd(a.costUsd, true)}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>

      <div className="mt-6 grid gap-6 lg:grid-cols-2">
        <Panel title="Request headers" description="Sensitive headers are redacted at ingestion.">
          <CodeBlock code={JSON.stringify(req.requestHeaders ?? {}, null, 2)} lang="json" maxHeight={320} />
        </Panel>
        <Panel title="Response headers">
          <CodeBlock code={JSON.stringify(req.responseHeaders ?? {}, null, 2)} lang="json" maxHeight={320} />
        </Panel>
      </div>
      {d.attempts.some((a) => a.timing) ? (
        <Panel title="Attempt timing (raw)" className="mt-6">
          <CodeBlock code={JSON.stringify(d.attempts.map((a) => ({ attempt: a.attemptNo, provider: a.provider, timing: a.timing })), null, 2)} lang="json" maxHeight={320} />
        </Panel>
      ) : null}
    </>
  );
}